<template>
  <div class='musicShow'>
    <div
      class="musicShowBlock"
      @click="playedSong()"
    >
      <div class="musicImg" :style="bgPic">
        <img :src="song.al.picUrl +'?param=120y120'" width="100%">
      </div>
      <div class="musicIntroduce">
        <div class="title">
          <div
            class="musicName"
            :class="{progibiMusicName: song.noCopyrightRcmd}"
          >
            {{ song.name }}
          </div>
          <div
            v-if="!song.noCopyrightRcmd"
            class="musicAuthor"
          >
            {{ song.ar[0].name }}
          </div>
          <div v-else class="prohibitPlayBox">
            <span class="prohibitPlay">无音源</span>
            <span class="prohibitPlayTip">
              {{ song.noCopyrightRcmd.typeDesc }} | {{ song.ar[0].name }}
            </span>
          </div>
        </div>
        <div v-if="song.name === playedSongObj.name" class="musicDuration">播放中</div>
        <div v-else class="musicDuration">
          {{ song.dt | filterMusicTime }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Toast } from 'vant'
export default {
  name: 'songShow',
  components: {},
  props: {
    song: {
      required: true,
      type: Object
    },
    index: {
      required: true,
      type: Number
    }
  },
  data () {
    return {
      // style
      bgPic: {
        backgroundSize: 'cover'
      }
    }
  },
  computed: {
    ...mapState(['playedSongObj', 'playingSongList', 'playedSongIndex'])
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 播放歌曲
    playedSong () {
      if (this.song.noCopyrightRcmd) {
        Toast.fail('无版权歌曲')
        return
      }
      // 判断该歌曲是否正在播放中，是，则展开弹出层，否，则修改对象，播放该歌曲
      if (this.song.id === this.playedSongObj.id) {
        this.$emit('showPopup')
      } else {
        this.$store.commit('setPlayedSongIndex', this.index)
        // 向外触发事件，将该歌曲所在的列表存储到 store 内的播放列表中
        this.$emit('storagePlayingSongList')
      }
    }
  }
}
</script>
<style lang='less' scoped>
@import "../../styles/common.less";
.musicShow {
  width: inherit;
  background: rgb(245, 245, 245);
  .musicShowBlock {
    height: 75px;
    margin: 18px 15px;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0px 0px 8px rgb(235, 235, 235);
    display: flex;
    overflow: hidden;
    .musicImg {
      width: 75px;
      height: 75px;
      background-color: rgb(217, 217, 217);
      background-size: cover;
    }
    .musicIntroduce {
      width: 267px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        height: 60px;
        width: 200px;
        line-height: 30px;
        margin-left: 10px;
      }
      .musicName {
        font-size: 16px;
        font-weight: bold;
        color: #383838;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .progibiMusicName {
        color: #acacac;
      }
      .musicAuthor {
        font-size: 14px;
        color: #acacac;
      }
      .prohibitPlayBox {
        display: flex;
        align-items: center;
      }
      .prohibitPlay {
        width: 40px;
        height: 12px;
        line-height: 14px;
        border: #acacac 1px solid;
        border-radius: 3px;
        font-size: 10px;
        text-align: center;
        color: #acacac;
      }
      .prohibitPlayTip {
        display: inline-block;
        width: 160px;
        font-size: 12px;
        color: #acacac;
        padding: 0px 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .playingTipText {
        font-size: 14px;
        color: @themeColor;
      }
      .musicDuration {
        font-size: 14px;
        margin-right: 10px;
        color: @themeColor;
      }
    }
  }
}
</style>
